<section style="width: 100%">
  <h5>format:</h5>
  <div class="input-group" style="margin-bottom: 10px; width: 200px">
    <d-select [size]="'sm'" [(ngModel)]="dateFormat" [options]="dateFormatOptions"></d-select>
  </div>
  <div
    class="two-date-wrapper"
    dTwoDatePicker
    (selectedRangeChange)="selectRange($event)"
    [dateFormat]="dateFormat"
    [minDate]="'2010-12-30'"
    [maxDate]="'2018-02-27'"
  >
    <div class="devui-input-group devui-dropdown-origin">
      <input
        class="devui-input devui-form-control"
        placeholder="y/MM/dd"
        [(ngModel)]="rangeStart1"
        dTwoDatePickerStart
        #startPicker="twoDatePickerStart"
        (selectStart)="selectStart($event)"
        (click)="startPicker.toggle()"
      />
      <div *ngIf="rangeStart1" class="devui-input-group-addon close-icon-wrapper" (click)="startPicker.clear()">
        <i class="icon icon-close"></i>
      </div>
      <div class="devui-input-group-addon" (click)="startPicker.toggle()">
        <i class="icon icon-calendar"></i>
      </div>
    </div>
    <div class="devui-input-group devui-dropdown-origin">
      <input
        class="devui-input devui-form-control"
        placeholder="y/MM/dd"
        [(ngModel)]="rangeEnd1"
        dTwoDatePickerEnd
        #endPicker="twoDatePickerEnd"
        (selectEnd)="selectEnd($event)"
        (click)="endPicker.toggle()"
      />
      <div *ngIf="rangeEnd1" class="devui-input-group-addon close-icon-wrapper" (click)="endPicker.clear()">
        <i class="icon icon-close"></i>
      </div>
      <div class="devui-input-group-addon" (click)="endPicker.toggle()">
        <i class="icon icon-calendar"></i>
      </div>
    </div>
  </div>
  <h5>dateConfig:</h5>
  <div
    class="two-date-wrapper"
    dTwoDatePicker
    [hideOnRangeSelected]="false"
    [cssClass]="'custom-css-class'"
    (selectedRangeChange)="selectRange($event)"
    [dateConfig]="dateConfig"
  >
    <div class="devui-input-group devui-dropdown-origin">
      <input
        class="devui-input devui-form-control"
        placeholder="y/MM/dd"
        [(ngModel)]="rangeStart2"
        dTwoDatePickerStart
        #startPicker2="twoDatePickerStart"
        (selectStart)="selectStart($event)"
        (click)="startPicker2.toggle()"
      />
      <div *ngIf="rangeStart2" class="devui-input-group-addon close-icon-wrapper" (click)="startPicker2.clear()">
        <i class="icon icon-close"></i>
      </div>
      <div class="devui-input-group-addon" (click)="startPicker2.toggle()">
        <i class="icon icon-calendar"></i>
      </div>
    </div>
    <div class="devui-input-group devui-dropdown-origin">
      <input
        class="devui-input devui-form-control"
        placeholder="y/MM/dd"
        [(ngModel)]="rangeEnd2"
        dTwoDatePickerEnd
        #endPicker2="twoDatePickerEnd"
        (selectEnd)="selectEnd($event)"
        (click)="endPicker2.toggle()"
      />
      <div *ngIf="rangeEnd2" class="devui-input-group-addon close-icon-wrapper" (click)="endPicker2.clear()">
        <i class="icon icon-close"></i>
      </div>
      <div class="devui-input-group-addon" (click)="endPicker2.toggle()">
        <i class="icon icon-calendar"></i>
      </div>
    </div>
  </div>
</section>
